<template>
  <el-card shadow="never">
    <Header></Header>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="createTime" label="日期" width="120" />
      <el-table-column label="公告">
        <template #default="scope">
          <div class="overflowtext-box">
            <div class="overflowtext-wrap">
              <input type="checkbox" id="overflowtext-exp">
              <div class="overflowtext-text">
                <label class="overflowtext-btn" for="overflowtext-exp"></label>
                {{ scope.row.content }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
import noitceApi from '@/api/Notice'
// const tableData = reactive([
//   {
//     date: '2023-04-01',
//     address: '欢迎使用开放蓝天',
//   },
//   {
//     date: '2023-04-04',
//     address: '开放蓝天即将上线',
//   },
//   {
//     date: '2023-04-05',
//     address: ' 本服务仅供个人学习、学术研究目的使用，未经许可，请勿分享、传播输入及生成的文本、图片内容。您在从事与本服务相关的所有行为(包括但不限于访问浏览、利用、转载、宣传介绍)时，必须以善意且谨慎的态度行事；您确保不得利用本服务故意或者过失的从事危害国家安全和社会公共利益、扰乱经济秩序和社会秩序、侵犯他人合法权益等法律、行政法规禁止的活动，并确保自定义输入文本不包含以下违反法律法规、政治相关、侵害他人合法权益的内容： ',
//   },
//   {
//     date: '2023-04-04',
//     address: '您确认使用本服务时输入的内容将不包含您的个人信息。您同意并承诺，在使用本服务时，不会披露任何保密、敏感或个人信息。',
//   },
//   {
//     date: '2023-04-04',
//     address: '您确认并知悉本服务生成的所有内容都是由人工智能模型生成，所以可能会出现意外和错误的情况，请确保检查事实。我们对其生成内容的准确性、完整性和功能性不做任何保证，并且其生成的内容不代表我们的态度或观点，仅为提供更多信息，也不构成任何建议或承诺。对于您根据本服务提供的信息所做出的一切行为，除非另有明确的书面承诺文件，否则我们不承担任何形式的责任。 ',
//   },
//   {
//     date: '2023-04-04',
//     address: '本服务来自于法律法规允许的包括但不限于公开互联网等信息积累，因互联网的开放性属性，不排除其中部分信息具有瑕疵、不合理或引发不快。  ',
//   },
//   {
//     date: '2023-04-04',
//     address: '不论在何种情况下，本网站均不对由于网络连接故障，电力故障，罢工，劳动争议，暴乱，起义，骚乱，火灾，洪水，风暴，爆炸，不可抗力，战争，政府行为，国际、国内法院的命令，黑客攻击，互联网病毒，网络运营商技术调整，政府临时管制或任何其他不能合理控制的原因而造成的本服务不能访问、服务中断、信息及数据的延误、停滞或错误，不能提供或延迟提供服务而承担责任。  ',
//   },
//   {
//     date: '2023-04-04',
//     address: '当本服务以链接形式推荐其他网站内容时，我们并不对这些网站或资源的可用性负责，且不保证从这些网站获取的任何内容、产品、服务或其他材料的真实性、合法性。在法律允许的范围内，本网站不承担您就使用本服务所提供的信息或任何链接所引致的任何直接、间接、附带、从属、特殊、继发、惩罚性或惩戒性的损害赔偿。',
//   },
// ])

let tableData = ref([])
const getNoticeList = () => {
  noitceApi.getNoticeLitst().then((res: any) => {
    tableData.value = res
  })
}
getNoticeList()

</script>
<style lang='scss' scoped>
::v-deep.el-table {
  transition-property: all;
  transition-duration: 0.6s;
  color: var(--main-font-color);
  background-color: var(--main-bg-color) !important;
}

::v-deep.el-table th.el-table__cell {
  transition-property: all;
  transition-duration: 0.6s;
  // color: var(--main-font-color);
  background-color: var(--main-bg-color) !important;
}

::v-deep.el-table tr {
  transition-property: all;
  transition-duration: 0.6s;
  // color: var(--main-font-color);
  background-color: var(--main-bg-color) !important;
  //pointer-events: none;
}

.overflowtext-box {
  position: relative;

  overflow: hidden;

  .overflowtext-wrap {

    display: flex;

    .overflowtext-text {

      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-wrap: break-word;
      word-break: break-all;

      .overflowtext-btn {
        float: right;
        clear: both;
        cursor: pointer;
        &::after {
          content: '展开';
          color: #006eff;
        }
      }

      &::before {
        content: '';
        float: right;
        width: 0px;
        height: 100%;
        margin-bottom: -25px;
      }

      &::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #fff;
      }
    }

    #overflowtext-exp {
      display: none;
    }

    #overflowtext-exp:checked+.overflowtext-text {
      -webkit-line-clamp: 999;
      max-height: none;

      &::after {
        visibility: hidden;
      }

      .overflowtext-btn::after {
        content: '收起';
        color: #006eff;
      }
    }
  }
}</style>